{% extends "template_base.html" %}
{% block title %}DeepyWeb - Log in or log up!{% endblock %}
{% block script %}
    <script>
        $(function () {
            var text = document.getElementById("my_alert").textContent;
            if (text != '') {
                alert(text);
            }
        });

        function finish_check() {
            var email = document.forms["register"]["email"].value;
            var Password = document.forms["register"]["password"].value;
            if (email == null || email == "") {
                alert("登录信息填写不全，请重新填写！");
                return false;
            } else if (Password == null || Password == "") {
                alert("登录信息填写不全，请重新填写！");
                return false;
            } else {
                var atpos = email.indexOf("@");
                var dotpos = email.lastIndexOf(".");
                if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
                    alert("Mail address format is not correct!");
                    return false;
                }
            }
        }


    </script>
{% endblock %}

{% block navbar %}
    <nav id="navbar" class="navbar">
        <ul>
            <!--<li><a class="nav-link scrollto active " href="#header">Home</a></li>-->
            <li><a class="nav-link scrollto" href="/">主 页</a></li>
            {% if not logged %}
                <li><a class="getstarted scrollto" href="login">登 录</a></li>
            {% else %}
                <li><a class="getstarted scrollto" href="logout">登 出</a></li>
            {% endif %}

        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
    </nav><!-- .navbar -->
{% endblock %}

{% block main %}
    <main id="main">
        <span id="my_alert" style="display:none;">{{my_alert}}</span>
<!--        <div id="wrong_alert" style="display:none">{{wrong_alert}}</div>-->
        <!-- ======= Breadcrumbs ======= -->
        <section class="breadcrumbs">
            <div class="container">
                <ol>
                    <li><a href="welcome">Home Page</a></li>
                </ol>
                <h2>Login</h2>
            </div>
        </section>
        <!-- End Breadcrumbs -->

        <section class="inner-page">
            <div class="container">

                <!-- Outer Row -->
                <div class="register-form">
                    <div class="col-xl-10 col-lg-12 col-md-9" style="margin: 0 auto;">
                        <div class="card o-hidden border-0 shadow-lg my-5", style="width: 50%;margin: auto;text-align: center;">
                            <div class="card-body p-0">
                                <!-- Nested Row within Card Body -->
                                <div class="row">

                                    <div class="p-5">
                                        <div class="text-center">
                                            <h2>欢迎回来！</h2>
                                        </div>
                                        <br>
                                        <form class="user" name="register" onsubmit="finish_check();" method="post"
                                              action="#">
                                            <div class="form-group">
                                                <center><input type="text" class="form-control form-control-user"
                                                               id="exampleInputEmail" aria-describedby="emailHelp"
                                                               placeholder="邮箱地址" name="email"
                                                               style="width:80%; height:40px;border-radius: 10px;border-color:gainsboro;
                                                   border-style: solid;mso-border-shadow: yes;outline: none;"></center>
                                            </div>
                                            <br>
                                            <div class="form-group">
                                                <center><input type="password" class="form-control form-control-user"
                                                               id="exampleInputPassword" placeholder="密码"
                                                               name="password"
                                                               style="width:80%; height:40px;border-radius: 10px;border-color:gainsboro;
                                                   border-style: solid;mso-border-shadow: yes;outline: none;"></center>
                                            </div>
                                            <br>
                                            <center><input type="submit" class="btn btn-primary btn-user btn-block"
                                                           value="登 录" style="width: 40%;height: 40px"></center>
                                            <br>
                                        <div class="myline" style="width:80%;margin:auto;text-align: center">
                                            <hr style="margin:10px;height:4px;border:0px;background-color:#D5D5D5;color:#708090;"/>
                                        </div>
                                        </form>
                                        <div class="text-center"><a class="small" href="forgot-password">忘记密码？</a></div>
                                        <div class="text-center"><a class="small" href="register">创建新账号！</a>
                                        </div>
                                        <div class="myline" style="width:80%;margin:auto;text-align: center">
                                            <hr style="margin:10px;height:4px;border:0px;background-color:#D5D5D5;color:#708090;"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- End #main -->
{% endblock %}
